<template>
    <div id="title" style="text-align: center;">
        <el-card style="max-width: 480px;margin: auto;padding-bottom: 15px;">
            <p>用户登录</p>
            <el-input v-model="name" style="width: 300px" placeholder="请输入用户名" clearable /><br><br>
            <el-input v-model="password" style="width: 300px" placeholder="请输入密码" clearable show-password /><br><br>
            <el-button type="primary" @click="login">登录</el-button><br><br>
            <el-link type="primary" @click="register" style="float: right;">立即注册</el-link>
            <el-link type="primary" @click="go" style="float: left;">暂不登录</el-link>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';


const message = ref('Hello, Vue 3!');
const name = ref('')
const password = ref('')
const data = ref({
    name: name,
    password: password
})
function get_null(data) {
    if (data == null || data == '') {
        return true
    }
    return false
}
function login() {
    if (get_null(name.value) || get_null(password.value)) {
        ElMessage("请输入用户名密码")
        return
    }
    axios.post("http://127.0.0.1:8000/driver_school/login/", data.value)
        .then(res => {
            console.log(res)
            if (res.data.code == 200) {
                ElMessage(res.data.message)
                localStorage.setItem("token",res.data.token)
                router.push("/dashboard/home")
                
            } else {
                ElMessage(res.data.message)
            }
        })
        .catch(err => {
            console.error(err);
        })
}
function go() {
    router.push("/dashboard/home")
}
function register(){
    router.push("/register")
}
onMounted(() => {
    // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>
<style>
#title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vb;
}
.el-link {
  margin-right: 8px;
}
</style>